<!--
 * @Author: your name
 * @Date: 2019-10-30 17:27:25
 * @LastEditTime: 2019-10-30 19:52:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\components\busone.vue
 -->
<template>
<div class="container">
	<van-nav-bar title="buseone" left-arrow fixed :border="false"
      @click-left='$router.push("/bus")'/>
      <form class="form-validation" @submit.prevent="submit" enctype="application/x-www-form-urlencoded">
		<div>
			<label>名字</label>
			<input type="text" name="username" v-model="username" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
		</div>
	</form>  
</div>
</template>
<script>
import { log } from 'util';
export default {
    data(){
        return{
            username:''
        }
	},
	created(){
		this.$bus.$on("send",data=>{
            this.username = data.username ;
            this.mobile = data.mobile ;
        })
	},
    methods: {
        
    },
    destroyed () {
        this.$bus.$emit("send",this);
    }
}
</script>
<style lang="less">
.form-validation {
    box-sizing: border-box;
    padding: 10px;
	width: 100%;
	div {
        margin-top: 10px;
        margin-bottom:10px;
		&:first-child {
			margin-top: 0;
		}
	}
	label {
		display: block;
		padding-bottom: 5px;
		font-size: 14px;
	}
	input {
        font-family: '微软雅黑';
        display: block;
        font-size: 14px;
        box-sizing: border-box;
		padding: 0 20px;
		outline: none;
		border: 1px solid #ccc;
		width: 100%;
		height: 40px;
		caret-color: blueviolet;
		transition: all 300ms;
		&:valid {
			border-color: rgb(22, 89, 214);
            box-shadow: inset 5px 0 0 rgb(22, 89, 214);
		}
		&:invalid {
			border-color: rgb(236, 46, 46);
            box-shadow: inset 5px 0 0 rgb(236, 46, 46);
		}
	}

}
</style>